<template>
  <div class="body">
    <section class="project-top">
      <div class="center-block">
        <div class="Crumbs">
          您的位置：
          <router-link to="/">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据中心<b>&gt;</b></router-link>
          <a href="javascript:;" target="">搜索</a>
        </div>
        <div class="data-searchBox">

          <div class="indexSearchBox">
            <div class="input-group">
            <span class="input-group-btn">
						  <i class="inSearchFdj dtFont dtFont-sousuo"></i>
					  </span>
              <input type="text" v-model="search" placeholder="请输入您要查询的事项" class="form-control">
              <span class="input-group-btn">
						<button class="btn btn-default" @click="this.forSearch" type="button">搜索</button>
					</span>
            </div>
          </div>
          <div class="data-Ctrl">
            <h3 class="circular-title">筛选</h3>
            <div class="d-inputCtrl" :class="screenIs?'':'active'" @click="screen">
              <span>收起 <i class="dtFont dtFont-shangla"></i></span>
              <span>展开 <i class="dtFont dtFont-xiala"></i></span>
            </div>

          </div>
          <el-collapse-transition>
            <ul v-show="screenIs" class="data-searchBoxSelcect">
              <li>
                <div>资格类别</div>
                <section>
                  <span :class="searchData.qualifit.all?'active':''" @click="all('qualifit')">不限</span>
                  <span :class="item.active?'active':''" @click="addSelected($event,'qualifit')" v-for="(item,index) in searchData.qualifit.rows" :data-index="index" :key="index" :data-id="item.id" :data-title="item.title">{{item.title}}</span>
                </section>
              </li>
              <li>
                <div>服务类型</div>
                <section>
                  <span :class="searchData.service.all?'active':''" @click="all('service')">不限</span>
                 <span :class="item.active?'active':''" @click="addSelected($event,'service')" v-for="(item,index) in searchData.service.rows" :data-index="index" :key="index" :data-id="item.id" :data-title="item.title">{{item.title}}</span>
                </section>
              </li>
              <li>
                <div>人员籍贯</div>
                <section>
                  <span :class="searchData.person.all?'active':''" @click="all('person')">不限</span>
                  <span :class="item.active?'active':''" @click="addSelected($event,'person')" v-for="(item,index) in searchData.person.rows" :data-index="index" :key="index" :data-id="item.id" :data-title="item.title">{{item.title}}</span>
                </section>
              </li>
            </ul>
          </el-collapse-transition>

          <div class="condition">
            <div>当前条件</div>
            <section>
              <span v-show="Selected.length === 0">不限</span>
              <span :data-id="item.id" v-for="(item,index) in Selected" :key="index">{{item.title}} <i @click="deleteMe(index)" class="dtFont dtFont-guanbi"></i></span>
              <button @click="Reset">清空搜索条件</button>
            </section>
          </div>
        </div>
      </div>
    </section>

    <section class="project-list">

      <div v-if="empty" class="search-dataNothing center-block">
        <p>抱歉，没有找到与“<font class="blue">{{search}}</font>”相关的内容。 <br>
          建议：<br>
          检查输入是否正确<br>
          简化输入词<br>
          尝试其他相关词，如同义、近义词等</p>
      </div>

      <div v-if="!empty" class="center-block relative">
        <div class="project-total">
          <p>查询结果：共<span>2987</span>条数据</p>
        </div>
        <div class="time-choose">
          <ul class="diWei">
            <li class="active"><a href="#">全部时间</a></li>
            <li><a href="#">一周内</a></li>
            <li><a href="#">一月内</a></li>
            <li><a href="#">一年内</a></li>
          </ul>

          <ul class="diWei">
            <li class="active"><a href="#">默认排序</a></li>
            <li><a href="#">时间排序</a></li>
            <li><a href="#">相关度排序</a></li>
          </ul>
        </div>
        <ul class="itemize clearfix">
          <li class="active">分类1 (160)</li>
          <li>分类2 (120)</li>
          <li>分类3 (60)</li>
        </ul>
        <!-- 表格中的高亮蓝色是搜索后的关键词-->
        <div class="project-tableBox">
          <table class="table project-table">
            <thead>
            <tr>
              <th class="padding-left-0" style="width: 160px">序号</th>
              <th style="width: 390px">企业名称</th>
              <th style="width: 290px">统一社会信用代码</th>
              <th style="width: 180px">法定代表人</th>
              <th class="text-right">企业注册地</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="padding-left-0">1</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">2</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">3</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">4</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">5</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">6</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">7</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">8</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">9</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>
            <tr>
              <td class="padding-left-0">10</td>
              <td><font class="blue">安徽德拓</font>信息科技有限公司</td>
              <td>342425199005022337</td>
              <td>马可波罗</td>
              <td class="text-right">江西省-南昌</td>
            </tr>

            </tbody>
          </table>
          <div class="padding-top-20">
            <el-pagination
              background
              :current-page="1"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="5">
            </el-pagination>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import { getMap } from  '@/api/dataService/index';

export default {
  name: 'search',
  components: {},
  data () {
    return {
      screenIs:true,
      search:'',
      empty:false,
      searchData:{
        qualifit:{
          all:true,
          rows:[
            {active:false,id:'dsadsad1',title:'政府投资类'},
            {active:false,id:'dsadsad2',title:'社会投资类'}
          ]
        },
        service:{
          all:true,
          rows:[
            {active:false,id:'dsadsad3',title:'房屋建筑工程'},
            {active:false,id:'dsadsad4',title:'市政工程'},
            {active:false,id:'dsadsad5',title:'水利工程'},
            {active:false,id:'dsadsad6',title:'公路工程'}
          ]
        },
        person:{
          all:true,
          rows:[
            {active:false,id:'dsadsad7',title:'江西省'},
            {active:false,id:'dsadsad8',title:'南昌'},
            {active:false,id:'dsadsad9',title:'九江'},
            {active:false,id:'dsadsad10',title:'上饶'},
            {active:false,id:'dsadsad11',title:'景德镇'},
            {active:false,id:'dsadsad12',title:'抚州'},
            {active:false,id:'dsadsad13',title:'宜春'}
          ]
        }
      },
      Selected:[]
    }
  },
  mounted () {
    this.search = this.$route.query.search
  },
  methods: {
    forSearch(){

    },
    screen(){
      this.screenIs = !this.screenIs
    },
    Reset(){  //清空搜索条件
      this.Selected = [];
      for(let key in this.searchData){
        this.searchData[key].all = true;
        this.searchData[key].rows.forEach(item=>{
          item.active = false
        })
      }
    },

    deleteMe(index) {  //自身删除
      let { id ,directory } = this.Selected[index];
      let nowObj = this.searchData[directory];
      nowObj.rows.some(item=>{
        if(item.id === id){item.active=false}
      });
      nowObj.all = nowObj.rows.every(item=>{
        return item.active === false
      });
      this.Selected.splice(index, 1)
    },

    addSelected(e,str){
      let obj = {
        id :e.srcElement.dataset.id,
        title :e.srcElement.dataset.title,
        index :e.srcElement.dataset.index,
        directory:str
      }
      let nowObj = this.searchData[str];
      if(nowObj.rows[obj.index].active){  //已选状态 删除
        nowObj.rows[obj.index].active = false;
        this.Selected.some((item,ind)=>{
          if(item.id === obj.id){
            this.Selected.splice(ind, 1);
          }
        })
        nowObj.all = nowObj.rows.every(item=>{
          return item.active === false
        })
      }else {  //未选状态 添加
        nowObj.all = false
        nowObj.rows[obj.index].active = true
        this.Selected = [...this.Selected,obj]
      }
    },

    all(str){ //不限按钮
      let nowObj = this.searchData[str];
      nowObj.all = true;
      nowObj.rows.forEach(item=>{
         item.active = false
      })
      this.Selected = this.Selected.filter(item=> {
        return item.directory !== str
      })
    }
  },
  computed:{}
}
</script>

<style scoped>
  .data-searchBoxSelcect{
   padding-top: 0;
  }
  .data-Ctrl{
    margin-bottom: 30px;
  }
</style>
